<template>
  <view class="container">
    <!-- 页面版头 -->
    <view class="header">
      <view class="header-left">
        <view class="title">
          Banner管理
        </view>
      </view>
      <view class="header-right">
        <!-- 搜索框 -->
        <view class="search-box">
          <uni-easyinput v-model="searchKeyword" placeholder="请输入Banner名称" class="search-input" />
          <button class="search-btn" @click="handleSearch">搜索</button>
        </view>

        <!-- 筛选按钮 -->
        <button class="filter-btn" @click="handleFilter">筛选</button>

        <!-- 批量操作按钮组 -->
        <view class="batch-actions">
          <button class="batch-btn" @click="handleBatchEnable">批量启用</button>
          <button class="batch-btn" @click="handleBatchDisable">批量禁用</button>
          <button class="batch-btn danger" @click="handleBatchDelete">批量删除</button>
        </view>

        <!-- 刷新按钮 -->
        <button class="refresh-btn" @click="handleRefresh">刷新</button>
      </view>
    </view>

    <!-- 数据列表展示区 -->
    <view class="content">
      <view class="table-container">
        <!-- 表格头部 -->
        <view class="table-header">
          <view class="table-row">
            <view class="table-cell checkbox-cell">
              <checkbox-group @change="handleSelectAll">
                <label>
                  <checkbox :checked="isAllSelected" value="all" />
                </label>
              </checkbox-group>
            </view>
            <view class="table-cell image-cell">Banner图片</view>
            <view class="table-cell name-cell">Banner名称</view>
            <view class="table-cell link-cell">跳转链接</view>
            <view class="table-cell sort-cell">Banner排序</view>
            <view class="table-cell status-cell">Banner状态</view>
            <view class="table-cell action-cell">操作</view>
          </view>
        </view>

        <!-- 表格内容 -->
        <view class="table-body">
          <view v-for="item in bannerList" :key="item._id" class="table-row"
            :class="{ selected: selectedItems.includes(item._id) }">
            <view class="table-cell checkbox-cell">
              <checkbox-group @change="(e) => handleSelectItem(item._id, e)">
                <label>
                  <checkbox :checked="selectedItems.includes(item._id)" :value="item._id" />
                </label>
              </checkbox-group>
            </view>
            <view class="table-cell image-cell">
              <image v-if="item.image" :src="item.image.url || item.image" class="banner-image" mode="aspectFill" @click="previewImage(item.image.url || item.image)" />
              <view v-else class="no-image">暂无图片</view>
            </view>
            <view class="table-cell name-cell" @click="goToDetail(item._id)">{{ item.title || '--' }}</view>
            <view class="table-cell link-cell" @click="goToDetail(item._id)">{{ item.link_value || '无链接' }}</view>
            <view class="table-cell sort-cell" @click="goToDetail(item._id)">{{ item.sort || 0 }}</view>
            <view class="table-cell status-cell" @click="toggleStatus(item)">
              <view class="status-badge" :class="item.status === 1 ? 'enabled' : 'disabled'">
                {{ item.status === 1 ? '启用' : '禁用' }}
              </view>
            </view>
            <view class="table-cell action-cell">
              <button class="edit-btn" @click="editBanner(item._id)">编辑</button>
              <button class="delete-btn" @click="deleteBanner(item)">删除</button>
            </view>
          </view>
        </view>

        <!-- 空数据提示 -->
        <view v-if="bannerList.length === 0" class="empty-data">
          <text>暂无数据</text>
        </view>
      </view>
    </view>

    <!-- 分页操作条 -->
    <view class="footer">
      <view class="pagination">
        <view class="pagination-info">
          共 {{ totalCount }} 条记录
        </view>
        <view class="pagination-controls">
          <button class="pagination-btn" :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">
            上一页
          </button>

          <view class="page-numbers">
            <button v-for="page in visiblePages" :key="page" class="page-btn" :class="{ active: page === currentPage }"
              @click="handlePageChange(page)">
              {{ page }}
            </button>
          </view>

          <button class="pagination-btn" :disabled="currentPage === totalPages"
            @click="handlePageChange(currentPage + 1)">
            下一页
          </button>
        </view>

        <view class="page-size-selector">
          <text>每页显示：</text>
          <select v-model="pageSize" @change="handlePageSizeChange">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="center" @maskClick="handleMaskClick">
      <view class="filter-popup">
        <view class="filter-header">
          <text class="filter-title">筛选Banner</text>
          <view class="filter-close" @click="handleClosePopup">×</view>
        </view>

        <view class="filter-content">
          <view class="filter-section">
            <text class="filter-label">状态筛选</text>
            <view class="filter-options">
              <view class="filter-option" :class="{ active: filterStatus === '' }" @click="applyFilter('')">
                <text>全部</text>
              </view>
              <view class="filter-option" :class="{ active: filterStatus === '1' }" @click="applyFilter('1')">
                <text>启用</text>
              </view>
              <view class="filter-option" :class="{ active: filterStatus === '0' }" @click="applyFilter('0')">
                <text>禁用</text>
              </view>
            </view>
          </view>
        </view>

        <view class="filter-footer">
          <button class="filter-btn clear" @click="clearFilter">清除筛选</button>
          <button class="filter-btn cancel" @click="handleClosePopup">取消</button>
        </view>
      </view>
    </uni-popup>

    <!-- 新增按钮 -->
    <uni-fab 
      :pattern="fabPattern" 
      :horizontal="fabHorizontal" 
      :vertical="fabVertical" 
      :direction="fabDirection" 
      @fabClick="addBanner" 
    />
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 响应式数据
const searchKeyword = ref('')
const bannerList = ref([])
const selectedItems = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const loading = ref(false)
const needBatchIds = ref([])
const filterStatus = ref('') // 筛选状态：''-全部，1-启用，0-禁用
const filterPopup = ref(null) // 筛选弹窗引用

// FAB按钮配置
const fabPattern = reactive({
  color: '#007AFF',
  backgroundColor: '#ffffff',
  selectedColor: '#0056CC',
  buttonColor: '#007AFF'
})
const fabHorizontal = ref('right')
const fabVertical = ref('bottom')
const fabDirection = ref('horizontal')

// 计算属性
const isAllSelected = computed(() => {
  return bannerList.value.length > 0 && selectedItems.value.length === bannerList.value.length
})

const totalPages = computed(() => {
  return Math.ceil(totalCount.value / pageSize.value)
})

const visiblePages = computed(() => {
  const pages = []
  const maxVisiblePages = 5
  let startPage = Math.max(1, currentPage.value - Math.floor(maxVisiblePages / 2))
  let endPage = Math.min(totalPages.value, startPage + maxVisiblePages - 1)

  if (endPage - startPage + 1 < maxVisiblePages) {
    startPage = Math.max(1, endPage - maxVisiblePages + 1)
  }

  for (let i = startPage; i <= endPage; i++) {
    pages.push(i)
  }
  return pages
})

// 生命周期
onMounted(() => {
  loadBannerList()
})

onShow(() => {
  // 页面显示时刷新数据
  loadBannerList()
})


// 云函数调用 - 获取banner列表
const loadBannerList = async () => {
  loading.value = true
  try {
    const result = await uniCloud.callFunction({
      name: 'food-banners',
      data: {
        action: 'get-banners',
        data: {
          page: currentPage.value,
          pageSize: pageSize.value,
          keyword: searchKeyword.value,
          status: filterStatus.value
        }
      }
    })
    if (result.result.code === 200) {
      bannerList.value = result.result.data.list || []
      totalCount.value = result.result.data.total || 0
    } else {
      uni.showToast({
        title: result.result.message || '获取数据失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取banner列表失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  loadBannerList()
}

// 筛选处理
const handleFilter = () => {
  if (filterPopup.value) {
    filterPopup.value.open()
  }
}

// 遮罩点击处理
const handleMaskClick = () => {
  if (filterPopup.value) {
    filterPopup.value.close()
  }
}

// 关闭弹窗处理
const handleClosePopup = () => {
  if (filterPopup.value) {
    filterPopup.value.close()
  }
}

// 应用筛选
const applyFilter = (status) => {
  console.log('applyFilter', status)
  filterStatus.value = status
  if (filterPopup.value) {
    filterPopup.value.close()
  }
  currentPage.value = 1
  loadBannerList()
}

// 清除筛选
const clearFilter = () => {
  filterStatus.value = ''
  if (filterPopup.value) {
    filterPopup.value.close()
  }
  currentPage.value = 1
  loadBannerList()
}

// 图片预览
const previewImage = (imageUrl) => {
  if (imageUrl) {
    uni.previewImage({
      urls: [imageUrl],
      current: 0
    })
  }
}

// 跳转到banner详情页面
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/banners/detail?id=${id}`
  })
}

// 编辑banner
const editBanner = (id) => {
  uni.navigateTo({
    url: `/pages/banners/edit?id=${id}`
  })
}

// 新增banner
const addBanner = () => {
  uni.navigateTo({
    url: '/pages/banners/add'
  })
}

// 删除banner
const deleteBanner = async (item) => {
  try {
    // 确认删除
    const result = await uni.showModal({
      title: '确认删除',
      content: `确定要删除banner"${item.title}"吗？此操作不可恢复。`,
      confirmText: '删除',
      confirmColor: '#ff4d4f',
      cancelText: '取消'
    })

    if (result.confirm) {
      // 调用云函数删除banner
      const deleteResult = await uniCloud.callFunction({
        name: 'food-banners',
        data: {
          action: 'delete-banner',
          data: {
            bannerId: item._id
          }
        }
      })

      if (deleteResult.result.code === 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        // 刷新列表
        loadBannerList()
      } else {
        uni.showToast({
          title: deleteResult.result.message || '删除失败',
          icon: 'none'
        })
      }
    }
  } catch (error) {
    console.error('删除banner失败:', error)
    uni.showToast({
      title: '删除失败，请重试',
      icon: 'none'
    })
  }
}

// 切换banner状态
const toggleStatus = async (item) => {
  try {
    const newStatus = item.status === 1 ? 0 : 1
    console.log('切换状态:', item._id, '新状态:', newStatus)
    const result = await uniCloud.callFunction({
      name: 'food-banners',
      data: {
        action: 'update-banner',
        data: {
          bannerId: item._id,
          bannerData: {
            status: newStatus
          }
        }
      }
    })

    if (result.result.code === 200) {
      uni.showToast({
        title: `已${newStatus === 1 ? '启用' : '禁用'}`,
        icon: 'success'
      })
      // 刷新列表
      loadBannerList()
    } else {
      uni.showToast({
        title: result.result.message || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('切换状态失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  }
}

// 刷新处理
const handleRefresh = () => {
  selectedItems.value = []
  loadBannerList()
}

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page
  loadBannerList()
}

const handlePageSizeChange = () => {
  currentPage.value = 1
  loadBannerList()
}

// 选择处理
const handleSelectAll = (e) => {
  // checkbox-group返回的是选中值的数组
  const selectedValues = e.detail.value

  // 如果包含'all'值，表示全选
  if (selectedValues.includes('all')) {
    // 全选
    selectedItems.value = bannerList.value.map(item => item._id)
  } else {
    // 取消全选
    selectedItems.value = []
  }
}

const handleSelectItem = (id, e) => {
  // checkbox-group返回的是选中值的数组
  const selectedValues = e.detail.value

  selectedItems.value = selectedValues
}

// 过滤出需要批量操作的banner
const filterBatchBanners = () => {
  // selectedItems.value 已经是数组，直接使用
  const selectedIds = selectedItems.value

  // 过滤出需要批量操作的banner
  const needBatchBanners = bannerList.value.filter(item => {
    return selectedIds.includes(item._id)
  })

  // 提取ID数组
  needBatchIds.value = needBatchBanners.map(item => item._id)
}

// 批量操作 - 启用
const handleBatchEnable = async () => {
  if (selectedItems.value.length === 0) {
    uni.showToast({
      title: '请先选择要操作的数据',
      icon: 'none'
    })
    return
  }

  // 过滤出需要批量操作的banner
  filterBatchBanners()
  try {
    const result = await uniCloud.callFunction({
      name: 'food-banners',
      data: {
        action: 'batch-operate',
        data: {
          action: 'batch-update-status',
          bannerIds: needBatchIds.value,
          data: { status: 1 }
        }
      }
    })

    if (result.result.code === 200) {
      uni.showToast({
        title: '批量启用成功',
        icon: 'success'
      })
      selectedItems.value = []
      loadBannerList()
    } else {
      uni.showToast({
        title: result.result.message || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('批量启用失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  }
}

// 批量操作 - 禁用
const handleBatchDisable = async () => {
  if (selectedItems.value.length === 0) {
    uni.showToast({
      title: '请先选择要操作的数据',
      icon: 'none'
    })
    return
  }

  // 过滤出需要批量操作的banner
  filterBatchBanners()

  try {
    const result = await uniCloud.callFunction({
      name: 'food-banners',
      data: {
        action: 'batch-operate',
        data: {
          action: 'batch-update-status',
          bannerIds: needBatchIds.value,
          data: { status: 0 }
        }
      }
    })

    if (result.result.code === 200) {
      uni.showToast({
        title: '批量禁用成功',
        icon: 'success'
      })
      selectedItems.value = []
      loadBannerList()
    } else {
      uni.showToast({
        title: result.result.message || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('批量禁用失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  }
}

// 批量操作 - 删除
const handleBatchDelete = async () => {
  if (selectedItems.value.length === 0) {
    uni.showToast({
      title: '请先选择要操作的数据',
      icon: 'none'
    })
    return
  }

  // 过滤出需要批量操作的banner
  filterBatchBanners()

  try {
    // 确认删除
    const result = await uni.showModal({
      title: '确认批量删除',
      content: `确定要删除选中的 ${needBatchIds.value.length} 个banner吗？此操作不可恢复。`,
      confirmText: '删除',
      confirmColor: '#ff4d4f',
      cancelText: '取消'
    })

    if (result.confirm) {
      // 调用云函数批量删除banner
      const deleteResult = await uniCloud.callFunction({
        name: 'food-banners',
        data: {
          action: 'batch-operate',
          data: {
            action: 'batch-delete',
            bannerIds: needBatchIds.value
          }
        }
      })

      if (deleteResult.result.code === 200) {
        uni.showToast({
          title: '批量删除成功',
          icon: 'success'
        })
        selectedItems.value = []
        loadBannerList()
      } else {
        uni.showToast({
          title: deleteResult.result.message || '批量删除失败',
          icon: 'none'
        })
      }
    }
  } catch (error) {
    console.error('批量删除失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: auto;
  box-sizing: border-box;
  position: relative;
}

/* 页面版头样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 24rpx 32rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 24rpx;
}

.header-left {
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12rpx;

  .search-input {
    width: 300rpx;
  }

  .search-btn {
    background: #007aff;
    color: white;
    border: none;
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
}

.filter-btn {
  background: #34c759;
  color: white;
  border: none;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.batch-actions {
  display: flex;
  gap: 12rpx;

  .batch-btn {
    background: #ff9500;
    color: white;
    border: none;
    padding: 16rpx 24rpx;
    border-radius: 8rpx;
    font-size: 26rpx;

    &.danger {
      background: #ff3b30;
    }
  }
}

.refresh-btn {
  background: #8e8e93;
  color: white;
  border: none;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 数据列表展示区样式 */
.content {
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 24rpx;
  overflow: hidden;
  min-height: auto;
}

.table-container {
  width: 100%;
}

.table-header {
  background: #f8f9fa;
  border-bottom: 2rpx solid #e9ecef;
}

.table-header .table-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 1rpx solid #e9ecef;

  &:last-child {
    border-bottom: none;
  }

  &.selected {
    background-color: #f0f8ff;
  }
}

.table-header .table-cell {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
  
  &.checkbox-cell {
    width: 5%;
    text-align: center;
  }
  
  &.image-cell {
    width: 10%;
    text-align: center;
  }
  
  &.name-cell {
    width: 15%;
  }
  
  &.link-cell {
    width: 40%;
    text-align: center;
  }
  
  &.sort-cell {
    width: 10%;
    text-align: center;
  }
  
  &.status-cell {
    width: 10%;
    text-align: center;
  }
  
  &.action-cell {
    width: 10%;
    text-align: center;
  }
}

.table-body .table-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 1rpx solid #e9ecef;

  &:last-child {
    border-bottom: none;
  }

  &.selected {
    background-color: #f0f8ff;
  }
}

.table-body .table-cell {
  padding: 20rpx 16rpx;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;

  &.checkbox-cell {
    width: 80rpx;
    justify-content: center;
  }

  &.image-cell {
    width: 120rpx;
    justify-content: center;
  }

  &.name-cell {
    width: 180rpx;
  }

  &.link-cell {
    flex: 1;
    min-width: 150rpx;
  }

  &.sort-cell {
    width: 100rpx;
    justify-content: center;
  }

  &.status-cell {
    width: 100rpx;
    justify-content: center;
  }

  &.action-cell {
    width: 200rpx;
    justify-content: center;
    flex-direction: row;
    gap: 8rpx;
  }
}

.table-body .table-cell:not(.checkbox-cell):not(.image-cell):not(.action-cell) {
  cursor: pointer;
}

.table-body .table-cell:not(.checkbox-cell):not(.image-cell):not(.action-cell):hover {
  background-color: #f5f5f5;
}

.empty-data {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}

.banner-image {
  width: 80rpx;
  height: 60rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.no-image {
  width: 80rpx;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #999;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;

  &.enabled {
    background: #d4edda;
    color: #155724;
  }

  &.disabled {
    background: #ff4d4f;
    color: #fff;
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

.edit-btn {
  padding: 1rpx 16rpx;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
}

.edit-btn:hover {
  background-color: #40a9ff;
}

.delete-btn {
  padding: 1rpx 16rpx;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #ff7875;
}

.table-body .table-cell:not(.checkbox-cell):not(.image-cell):not(.action-cell) {
  cursor: pointer;
}

.table-body .table-cell:not(.checkbox-cell):not(.image-cell):not(.action-cell):hover {
  background-color: #f5f5f5;
}

.empty-data {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 分页操作条样式 */
.footer {
  background: #ffffff;
  padding: 24rpx 32rpx;
  border-radius: 12rpx;
  margin-top: 32rpx;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20rpx;
}

.pagination-info {
  font-size: 28rpx;
  color: #666;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.pagination-btn {
  background: #007aff;
  color: white;
  border: none;
  padding: 12rpx 24rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  cursor: pointer;

  &:disabled {
    background: #c7c7cc;
    color: #8e8e93;
    cursor: not-allowed;
  }
}

.page-numbers {
  display: flex;
  gap: 8rpx;
}

.page-btn {
  background: #f8f9fa;
  color: #333;
  border: 1rpx solid #dee2e6;
  padding: 12rpx 20rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  min-width: 60rpx;
  cursor: pointer;

  &.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
  }
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 26rpx;
  color: #666;

  select {
    border: 1rpx solid #dee2e6;
    border-radius: 6rpx;
    padding: 8rpx 16rpx;
    background: white;
    cursor: pointer;
  }
}

.filter-popup {
  background: #ffffff;
  border-radius: 20rpx;
  width: 600rpx;
  max-width: 90vw;
  overflow: hidden;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #e9ecef;

  .filter-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .filter-close {
    font-size: 40rpx;
    color: #999;
    cursor: pointer;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: #333;
    }
  }
}

.filter-content {
  padding: 32rpx;
}

.filter-section {
  margin-bottom: 32rpx;

  .filter-label {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.filter-options {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.filter-option {
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 20rpx 32rpx;
  font-size: 28rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: #007aff;
    color: #007aff;
  }

  &.active {
    background: #007aff;
    border-color: #007aff;
    color: white;
  }
}

.filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #e9ecef;

  .filter-btn {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    border: none;
    cursor: pointer;

    &.clear {
      background: #ff9500;
      color: white;
    }

    &.cancel {
      background: #8e8e93;
      color: white;
    }
  }
}

.image-preview {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  
  .preview-image {
    width: 600rpx;
    height: 400rpx;
    border-radius: 10rpx;
  }
  
  .no-preview {
    width: 600rpx;
    height: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 10rpx;
    border: 2rpx dashed #e9ecef;
    
    .no-preview-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .close-btn {
    margin-top: 30rpx;
    background: #007aff;
    color: #ffffff;
    border: none;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;
    font-size: 26rpx;
  }
}

.link-preview {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  
  .link-title {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .link-url {
    display: block;
    font-size: 26rpx;
    color: #666;
    word-break: break-all;
    background: #f8f9fa;
    padding: 16rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
  }
  
  .link-actions {
    display: flex;
    gap: 16rpx;
    
    .action-btn {
      flex: 1;
      height: 64rpx;
      border: none;
      border-radius: 8rpx;
      font-size: 26rpx;
      
      &.copy {
        background: #52c41a;
        color: #ffffff;
      }
      
      &.close {
        background: #f8f9fa;
        color: #666;
        border: 2rpx solid #e9ecef;
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .container {
    padding: 24rpx;
  }
  
  .header {
    flex-direction: column;
    gap: 20rpx;
  }
  
  .header-right {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .batch-actions {
    order: -1;
    width: 100%;
    justify-content: center;
  }
  
  .table-cell {
    &.link {
      display: none;
    }
    
    &.name {
      flex: 1;
    }
  }
  
  .pagination {
    flex-direction: column;
    gap: 16rpx;
  }
  
  .filter-popup {
    width: 90vw;
    margin: 0 auto;
  }

  .filter-options {
    flex-direction: column;
  }

  .filter-option {
    text-align: center;
  }
}
</style>